<template>
  <div class="login">
    <div>
      <h2 style="margin-top: 20px;position: relative;top:40px;font-size: 30px">
        博闻书店
      </h2>
    </div>
    <div class="loginBtn">
      <div >
        <img src="@/assets/logo.png" class="touxiang" alt="">
      </div>
      <el-input placeholder="请输入账户名字" v-model="username">
        <template slot="prepend">username</template>
      </el-input>
      <el-input  style="margin-top: 20px"  placeholder="请输入密码" v-model="password">
        <template slot="prepend">password</template>
      </el-input>
    <div style="margin-top: 20px"> <el-button type="primary" @click="login">登录</el-button> <el-button type="primary" @click="register">注册</el-button></div>

    </div>
  </div>
</template>

<script>
import Cookie from 'js-cookie'
import {listSearchMixin} from "@/config/mixin";
import {mapMutations} from "vuex";

export default {
  name:'Login',
  mixins:[listSearchMixin],

  data() {
    return {
      username: "",
      password: '',
    }
  },

  methods:{
    ...mapMutations(['SET_USERINFO']),
    login(){
      // this.$axios({
      //   method:'get',
      //   url:'http://localhost:8080/user',
      //   payload:{
      //     username:'admin'
      //   }
      // }).then( res =>{
      //   console.log(res.data)
      // }).catch(res =>{
      //   console.log('请求失败')
      //   console.log(res.data)
      // })
      let params = {
        url:'user',
        method:'get',
        payload:{
          username:this.username,
          password:this.password
        }
      }
      this.sendReq(params,(res) => {
        if(res.data.records.length !=0){
          this.SET_USERINFO(res.data.records)
          Cookie.set('userInfo',res.data.records[0])
          this.$router.push('/index')
        }else{
          this.$message({
            message: '登录失败',
            type: 'error'
          });
        }

      })
    },
    register(){

    }
  }

}
</script>

<style scoped>

.login{
  background-color: antiquewhite;
  height: 100%;
}
.touxiang{
  position: relative;
  top:-33px;
  border-radius: 70px;
  border: 3px white solid;
  width:102px;
  height: 102px;
  background-color: #2c3e50;
}

.loginBtn {
  width: 25%;
  height: 30%;
  margin: auto;
  border: 1px solid red;
  border-radius: 20px;
  padding: 10px;
  background-color: aqua;
  margin-top: 150px;
}
</style>
